<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>人体运动功能检测评估报告</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="tabs-container">
                <div class="tabs-left">
                    <ul id="deviceTabs" class="nav nav-tabs">
                    </ul>
                    <div id="deviceDatas" class="tab-content ">
                    </div>
                </div>
<!--                <div class="ibox-content">-->
<!--                    <i class="fa fa-circle"></i>-->
<!--                </div>-->
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/js/sockjs.min.js}"></script>
    <script th:src="@{/js/stomp.js}"></script>
    <script type="text/javascript">
        const defaultColorStops = {
            '0.0': '#ffffff',
            '0.3': '#00ff00',
            '0.6': '#ffff00',
            '1.0': '#ff0000',
        }
        const width = 256;
        const height = 1;

        // 创建一条宽为256,高为1的像素带，颜色可自定义。
        function getColorPaint() {
            let paletteCanvas = document.createElement('canvas');
            paletteCanvas.width = width;
            paletteCanvas.height = height;
            let ctx = paletteCanvas.getContext('2d');
            let linearGradient = ctx.createLinearGradient(0, 0, width, height);
            for (const key in defaultColorStops) {
                // 绘制彩色渐变色条
                linearGradient.addColorStop(key, defaultColorStops[key]);
            }
            ctx.fillStyle = linearGradient;
            ctx.fillRect(0, 0, width, height);
            // 获取色带图像上的像素点。（像素信息为[r, g, b, a, r, g, b, a…]，数组中容纳了所有的像素点信息，每个像素点依次排列，每个像素点信息包含r、g、b、a，总共有256个r、g、b、a）
            return ctx.getImageData(0, 0, width, height).data;
        }
        function round(num,dec){
            var strNum = num + '';/*把要转换的小数转换成字符串*/
            var index = strNum.indexOf("."); /*获取小数点的位置*/
            if(index < 0) {
                return num;/*如果没有小数点，那么无需四舍五入，返回这个整数*/
            }
            var n = strNum.length - index -1;/*获取当前浮点数，小数点后的位数*/
            if(dec < n){
                /*把小数点向后移动要保留的位数，把需要保留的小数部分变成整数部分，只留下不需要保留的部分为小数*/
                var e = Math.pow(10, dec);
                num = num * e;
                /*进行四舍五入，只保留整数部分*/
                num = Math.round(num);
                /*再把原来小数部分还原为小数*/
                return num / e;
            } else {
                return num;/*如果当前小数点后的位数等于或小于要保留的位数，那么无需处理，直接返回*/
            }
        }
        function imgclick(obj){
            var u_l = obj.getElementsByTagName("i");
            if(u_l.length > 0){
                for(var i=0;i<=u_l.length-1;i++){
                    u_l[i].remove();
                }
            }
        }
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/common/queryUser",
            success: function (res) {
                var html = [];
                var html1 = [];
                for (var i = 0; i < res.data.length; i++) {
                    if(i == 0){
                        html.push("<li class=\"active\"><a id=\"a" + res.data[i].userId + "\" data-toggle=\"tab\" href=\"#" + res.data[i].userId + "\" onclick=\"imgclick(this)\">" + res.data[i].userName + "</a></li>");
                        html1.push("<div id=\"" + res.data[i].userId + "\" class=\"tab-pane active\"><div id=\"dev-" + res.data[i].userId + "\" class=\"panel-body\">" +
                            "<label class=\"col-sm-1 control-label\">姓名：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].userName + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">年龄：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].age + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">性别：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + (res.data[i].sex == 0 ? "男" : "女") + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">身高：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].height + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">体重：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].weight + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">鞋码：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].shoe + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">脚长：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].foot + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">联系方式：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].phonenumber + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">病历：</label><div class=\"col-sm-11\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].medical + "\" class=\"form-control\"></div>" +
                            "<div class=\"col-sm-6\">" +
                            "<div class=\"col-sm-3\">" +
                            "<label>左脚压力点1：</label><input id=\"inputleft" + res.data[i].userId + "1\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>左脚压力点2：</label><input id=\"inputleft" + res.data[i].userId + "2\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>左脚压力点3：</label><input id=\"inputleft" + res.data[i].userId + "3\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>左脚压力点4：</label><input id=\"inputleft" + res.data[i].userId + "4\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "</div>" +
                            "<div class=\"col-sm-3\">" +
                            "<canvas id=\"footleft" + res.data[i].userId + "\" width=\"170\" height=\"355\" style=\"border:1px solid #000000;background:url(../img/foot-left.jpg);\"></canvas>" +
                            "</div>" +
                            "</div>" +
                            "<div class=\"col-sm-6\">" +
                            "<div class=\"col-sm-3\">" +
                            "<label>右脚压力点1：</label><input id=\"inputright" + res.data[i].userId + "1\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>右脚压力点2：</label><input id=\"inputright" + res.data[i].userId + "2\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>右脚压力点3：</label><input id=\"inputright" + res.data[i].userId + "3\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>右脚压力点4：</label><input id=\"inputright" + res.data[i].userId + "4\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "</div>" +
                            "<div class=\"col-sm-3\">" +
                            "<canvas id=\"footright" + res.data[i].userId + "\" width=\"170\" height=\"355\" style=\"border:1px solid #000000;background:url(../img/foot-right.jpg);\"></canvas>" +
                            "</div>" +
                            "</div>" +
                            "</div></div>");
                    }else{
                        html.push("<li class=\"\"><a id=\"a" + res.data[i].userId + "\" data-toggle=\"tab\" href=\"#" + res.data[i].userId + "\" onclick=\"imgclick(this)\">" + res.data[i].userName + "</a></li>");
                        html1.push("<div id=\"" + res.data[i].userId + "\" class=\"tab-pane\"><div id=\"dev-" + res.data[i].userId + "\" class=\"panel-body\">" +
                            "<label class=\"col-sm-1 control-label\">姓名：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].userName + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">年龄：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].age + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">性别：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + (res.data[i].sex == 0 ? "男" : "女") + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">身高：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].height + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">体重：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].weight + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">鞋码：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].shoe + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">脚长：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].foot + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">联系方式：</label><div class=\"col-sm-2\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].phonenumber + "\" class=\"form-control\"></div>" +
                            "<label class=\"col-sm-1 control-label\">病历：</label><div class=\"col-sm-11\"><input type=\"text\" disabled=\"\" placeholder=\"" + res.data[i].medical + "\" class=\"form-control\"></div>" +
                            "<div class=\"col-sm-6\">" +
                            "<div class=\"col-sm-3\">" +
                            "<label>左脚压力点1：</label><input id=\"inputleft" + res.data[i].userId + "1\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>左脚压力点2：</label><input id=\"inputleft" + res.data[i].userId + "2\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>左脚压力点3：</label><input id=\"inputleft" + res.data[i].userId + "3\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>左脚压力点4：</label><input id=\"inputleft" + res.data[i].userId + "4\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "</div>" +
                            "<div class=\"col-sm-3\">" +
                            "<canvas id=\"footleft" + res.data[i].userId + "\" width=\"170\" height=\"355\" style=\"border:1px solid #000000;background:url(../img/foot-left.jpg);\"></canvas>" +
                            "</div>" +
                            "</div>" +
                            "<div class=\"col-sm-6\">" +
                            "<div class=\"col-sm-3\">" +
                            "<label>右脚压力点1：</label><input id=\"inputright" + res.data[i].userId + "1\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>右脚压力点2：</label><input id=\"inputright" + res.data[i].userId + "2\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>右脚压力点3：</label><input id=\"inputright" + res.data[i].userId + "3\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "<label>右脚压力点4：</label><input id=\"inputright" + res.data[i].userId + "4\" type=\"text\" disabled=\"\" class=\"form-control\">" +
                            "</div>" +
                            "<div class=\"col-sm-3\">" +
                            "<canvas id=\"footright" + res.data[i].userId + "\" width=\"170\" height=\"355\" style=\"border:1px solid #000000;background:url(../img/foot-right.jpg);\"></canvas>" +
                            "</div>" +
                            "</div>" +
                            "</div></div>");
                    }
                }
                $("#deviceTabs").html(html);
                $("#deviceDatas").html(html1);

                var stomp = null;
                var url = "https://sunfu.xdkdate.com/webSocket"
                // var url = "https://www.bythealthy.com/sunfu/webSocket"
                // var url = "http://localhost:8009/webSocket"
                var socket = new SockJS(url);
                stomp = Stomp.over(socket);
                //连接
                stomp.connect({}, function (frame) {
                    //订阅广播
                    stomp.subscribe("/topic/broadcast", function (res) {
                        // $("#broadcastMsg").val(res.body);
                        var obj = eval('('+res.body+')');
                        console.log(obj);
                        if(res.body.indexOf("position") != -1){
                            var a = document.getElementById("a" + obj.userId);
                            var li = a.parentElement;
                            if(li.getAttribute("class") != "active"){
                                a.innerHTML = obj.name + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<i class=\"fa fa-spinner\"></i>";
                            }
                            var foot;
                            var data;
                            if(obj.pointNum == 4) {
                                if (obj.position == 1) {
                                    foot = "footleft";
                                    var data0 = obj.data0;
                                    var data1 = obj.data1;
                                    var data2 = obj.data2;
                                    var data3 = obj.data3;
                                    document.getElementById("inputleft" + obj.userId + 1).value = round(data0 * 0.71 / 2, 2) + "kg";
                                    document.getElementById("inputleft" + obj.userId + 2).value = round(data1 * 0.71 / 2, 2) + "kg";
                                    document.getElementById("inputleft" + obj.userId + 3).value = round(data2 * 0.71 / 2, 2) + "kg";
                                    document.getElementById("inputleft" + obj.userId + 4).value = round(data3 * 0.71 / 2, 2) + "kg";
                                    data = [
                                        {
                                            x: 120, y: 120, value: data0 * 3
                                        },
                                        {
                                            x: 45, y: 120, value: data1 * 3
                                        },
                                        {
                                            x: 55, y: 210, value: data2 * 3
                                        },
                                        {
                                            x: 65, y: 280, value: data3 * 3
                                        }
                                    ]
                                } else {
                                    foot = "footright";
                                    var data0 = obj.data0;
                                    var data1 = obj.data1;
                                    var data2 = obj.data2;
                                    var data3 = obj.data3;
                                    document.getElementById("inputright" + obj.userId + 1).value = round(data0 * 0.71 / 2, 2) + "kg";
                                    document.getElementById("inputright" + obj.userId + 2).value = round(data1 * 0.71 / 2, 2) + "kg";
                                    document.getElementById("inputright" + obj.userId + 3).value = round(data2 * 0.71 / 2, 2) + "kg";
                                    document.getElementById("inputright" + obj.userId + 4).value = round(data3 * 0.71 / 2, 2) + "kg";
                                    data = [
                                        {
                                            x: 50, y: 120, value: data0 * 3
                                        },
                                        {
                                            x: 125, y: 120, value: data1 * 3
                                        },
                                        {
                                            x: 115, y: 210, value: data2 * 3
                                        },
                                        {
                                            x: 105, y: 280, value: data3 * 3
                                        }
                                    ]
                                }
                            }else if(obj.pointNum == 8){
                                if (obj.position == 1) {
                                    foot = "footleft";
                                    data = [
                                        {
                                            x:145,y:45,value:obj.data0
                                        },
                                        {
                                            x:120,y:120,value:obj.data1
                                        },
                                        {
                                            x:45,y:120,value:obj.data2
                                        },
                                        {
                                            x:50,y:160,value:obj.data3
                                        },
                                        {
                                            x:55,y:210,value:obj.data4
                                        },
                                        {
                                            x:55,y:240,value:obj.data5
                                        },
                                        {
                                            x:65,y:280,value:obj.data6
                                        },
                                        {
                                            x:65,y:320,value:obj.data7
                                        }
                                    ]
                                } else {
                                    foot = "footright";
                                    data = [
                                        {
                                            x:25,y:45,value:obj.data0
                                        },
                                        {
                                            x:50,y:120,value:obj.data1
                                        },
                                        {
                                            x:125,y:120,value:obj.data2
                                        },
                                        {
                                            x:120,y:160,value:obj.data3
                                        },
                                        {
                                            x:115,y:210,value:obj.data4
                                        },
                                        {
                                            x:115,y:240,value:obj.data5
                                        },
                                        {
                                            x:105,y:280,value:obj.data6
                                        },
                                        {
                                            x:105,y:320,value:obj.data7
                                        }
                                    ]
                                }
                            }
                            var canvas = document.getElementById(foot + obj.userId);
                            var context = canvas.getContext('2d');
                            context.clearRect(0, 0, 170, 355);
                            var radius = 50;
                            var max = 90;
                            var min = 0;
                            data.forEach(point => {
                                let {
                                    x,
                                    y,
                                    value
                                } = point;
                                // 开始为每个数据点绘制圆，圆心为[x,y]，半径为radius
                                context.beginPath();
                                context.arc(x, y, radius, 0, 2 * Math.PI);
                                context.closePath();
                                // 给圆加上渐变色，圆心至边的渐变色为#000至透明
                                let radialGradient = context.createRadialGradient(x, y, 0, x, y, radius);
                                radialGradient.addColorStop(0, 'rgba(0,0,0,1)');
                                radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
                                context.fillStyle = radialGradient;
                                // 给圆加上透明度，值为globalAlpha
                                let globalAlpha = (value - min) / (max - min);
                                context.globalAlpha = Math.max(Math.min(globalAlpha, 1), 0);
                                context.fill();
                            });
                            let palette = getColorPaint();
                            // 再获取整张800 * 800画布上的像素信息pointImgData（含灰度渐变圆）（同样，像素信息为[r, g, b, a, r, g, b, a…]）
                            let pointImg = context.getImageData(0, 0, 170, 355);
                            let pointImgData = pointImg.data;
                            // 获取pointImgData中每个像素点point的alpha值（范围0-255），根据获取到的alpha值，再到色带上一一对应，取色带上对应的像素点（rgb）覆盖到point上。（如当前取到的alpha值为0，则在彩色渐变色带上获取到的便是第一个像素点；若当前取到的alpha值为50，则是第50个像素点。）
                            for (var i = 3; i < pointImgData.length; i += 4) {
                                let alpha = pointImgData[i];
                                let offset = alpha * 4;
                                pointImgData[i - 3] = palette[offset];
                                pointImgData[i - 2] = palette[offset + 1];
                                pointImgData[i - 1] = palette[offset + 2];
                            }
                            context.putImageData(pointImg, 0, 0);
                        }else{
                            var a = document.getElementById("a" + obj.userId);
                            var li = a.parentElement;
                            if(li.getAttribute("class") != "active"){
                                a.innerHTML = obj.userName + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<i class=\"glyphicon glyphicon-user\"></i>";
                            }
                        }
                    });
                });
            }
        })
    </script>
</body>
</html>
